<template>
  <div class="container">
    <div class="weui-tab">
      <div class="weui-navbar">
        <div v-for="(item,index) in tabs" :key="index" :id="index" :class="{'weui-bar__item_on':activeIndex == index}"
             class="weui-navbar__item" @click="tabClick(item.id)">
          <div class="weui-navbar__title">{{item.name}}</div>
        </div>
      </div>
      <div class="weui-navbar-content__slider">
        <div class="weui-navbar-slider" v-for="(item,index) in tabs" :key="index">
          <div class="weui-navbar-slider-inner" :class="{'weui-navbar-slider-on':activeIndex == index}"></div>
        </div>
      </div>
    </div>
    <div class="content">

      <div :hidden="activeIndex != 0">
        <div class="weui-panel weui-panel_access">
          <div class="weui-panel__bd">
            <div v-for="(item ,index) in photos" :key="index">
              <navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                <div class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                  <image class="weui-media-box__thumb" :src="icon60"/>
                </div>
                <div class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                  <div class="weui-media-box__title">标题一</div>
                  <div class="weui-media-box__desc">由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。</div>
                </div>
              </navigator>
            </div>
          </div>
        </div>
      </div>
      <div :hidden="activeIndex != 1">选项二的内容</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    component: {},
    data() {
      return {
        tabs: [
          {
            id: 0,
            name: "你喜欢的"
          },
          {
            id: 1,
            name: "喜欢你的"
          }
        ],
        activeIndex: 0
      }
    },
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    methods: {
      tabClick(id) {
        this.activeIndex = id;
      }
    },
    onShow() {
      wx.setNavigationBarTitle({title: '喜欢'});
    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
    overflow: hidden;
  }

  .weui-tab {
    width: 100vw;
    height: 10vh;
    float: top;
  }

  .weui-navbar {
    position: relative;
    border: none;
  }

  .weui-navbar-content__slider {
    display: flex;
  }

  .weui-navbar-slider {
    flex: 1;
  }

  .weui-navbar-slider-inner {
    height: 6px;
    width: 80%;
    margin: 0 auto;
    transition: all 0.3s;
  }

  .weui-navbar-slider-on {
    background-color: #1aad19;
  }

  .content {
    margin-left: 1vw;
    float: top;
    width: 98vw;
    height: 90vh;
    background-color: white;
  }
</style>
